<template>
	<scroll-view scroll-y="true" :style="{ height: scorllHeight + 'px', width: '690rpx' }">
		<view class="red">答题的首页!!</view>
	</scroll-view>
</template>

<script>
export default {
	mounted() {
		this.setScrollHeight();
	},
	data() {
		return {
			scorllHeight: 0
		};
	},

	methods: {
		setScrollHeight() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					let windowHeight = res.windowHeight; //屏幕高度
					// 获取手机顶部状态栏的高度
					const statusBarHeight = res.statusBarHeight || 0;
					// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
					// 计算顶部图标距离
					const topIconDistance = statusBarHeight + navBarHeight;

					// 总高度 减去 顶部高度 减去 tabbar高度
					that.scorllHeight = res.windowHeight - topIconDistance - 132;
					// this.topIconDistance = topIconDistance; //单位px
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.red {
	font-size: 60rpx;
	color: red;
}
</style>
